<div class="content">
    <div class="left">
        <nz-card [nzSize]="'small'">
            <app-department-tree #tree (nodeChecked)="nodeChecked($event)" (loadData)="loadedData($event)">
            </app-department-tree>
        </nz-card>
    </div>
    <div class="right">
        <nz-card [nzSize]="'small'">
            <div>
                <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm" (ngSubmit)="submitSearch()">
                    <nz-form-item class="mb-5">
                        <nz-form-label [nzFor]="'name'">姓名</nz-form-label>
                        <nz-form-control>
                            <input nz-input placeholder="姓名" [formControlName]="'name'" [attr.id]="'name'"
                                autocomplete="off" />
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item class="mb-5">
                        <nz-form-label [nzFor]="'phoneNumber'">电话号码</nz-form-label>
                        <nz-form-control>
                            <input nz-input placeholder="电话号码" [formControlName]="'phoneNumber'"
                                [attr.id]="'phoneNumber'" autocomplete="off" />
                        </nz-form-control>
                    </nz-form-item>

                    <nz-form-item>
                        <nz-form-label [nzSm]="6" [nzXs]="24">职位</nz-form-label>
                        <nz-form-control [nzSm]="14" [nzXs]="24">
                            <nz-select style="width: 150px;" nzAllowClear nzPlaceHolder="请选择职位" [attr.id]="'roleid'"
                                formControlName="position">
                                <nz-option *ngFor="let role of positionOptions" [nzValue]="role.id"
                                    [nzLabel]="role.name"></nz-option>
                            </nz-select>
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item>
                        <nz-form-control>
                            <button nz-button nzType="primary">搜索</button>
                        </nz-form-control>
                    </nz-form-item>
                </form>
            </div>
            <div class="mt-10">
                <nz-table #dataTable nzSize="middle" [nzData]="data" nzShowPagination="false" nzFrontPagination="false"
                    nzBordered="true">
                    <thead>
                        <tr>
                            <th nzAlign="center" nzWidth="60px">#</th>
                            <th nzAlign="center" nzWidth="60px">头像</th>
                            <th nzAlign="center" nzWidth="120px">姓名</th>
                            <th nzAlign="center" nzWidth="120px">联系电话</th>
                            <th nzAlign="center" nzWidth="60px">性别</th>
                            <th nzAlign="center">职务</th>
                            <th nzAlign="center" nzWidth="60px">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let data of dataTable.data;let i = index">
                            <td nzAlign="center">{{ i + 1}}</td>
                            <td nzAlign="center">
                                <nz-avatar *ngIf="!data.avatar" nzSize="large" nzIcon="user"></nz-avatar>
                                <nz-avatar *ngIf="data.avatar" nzSize="large" [nzSrc]="getImgUrl(data.avatar)">
                                </nz-avatar>
                            </td>
                            <td nzAlign="center">{{ data.name }}</td>
                            <td nzAlign="center">{{ data.phoneNumber }}</td>
                            <td nzAlign="center">{{ data.sex | gender }}</td>
                            <td nzAlign="center">
                                <nz-tag nzColor="success" *ngFor="let item of data.positionIds.split(',')">
                                    {{getPositionName(item)}}</nz-tag>
                            </td>
                            <td nzAlign="center">
                                <button nz-button nzType="default" nzShape="circle" *canOperate="'updateEmployeeBtn'"
                                    (click)="edit(data.id)" class="mr-10"><i nz-icon nzType="edit"></i></button>
                            </td>
                        </tr>
                    </tbody>
                </nz-table>
            </div>

            <div class="mt-10">
                <nz-pagination [(nzPageSize)]="size" [(nzPageIndex)]="page" [nzTotal]="total" nzShowSizeChanger
                    nzShowQuickJumper (nzPageIndexChange)="pageChange()" (nzPageSizeChange)="sizeChange()">
                </nz-pagination>
            </div>
        </nz-card>
    </div>
</div>

<ng-template #editTitleTpl>
    <span>编辑员工</span>
</ng-template>
<ng-template #contentTpl>
    <form nz-form [formGroup]="editForm" (ngSubmit)="submitEdit()">
        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24">员工姓名</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
                <input nz-input formControlName="name" /></nz-form-control>
        </nz-form-item>

        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24">选择部门</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
                <nz-tree-select #menuTree [nzNodes]="departmentNode" nzPlaceHolder="请选择" formControlName="department">
                </nz-tree-select>
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>
            <nz-form-label [nzSm]="6" [nzXs]="24">选择职务</nz-form-label>
            <nz-form-control [nzSm]="14" [nzXs]="24">
                <nz-select nzAllowClear nzPlaceHolder="请选择" [attr.id]="'roleid'" formControlName="positions"
                    nzMode="multiple">
                    <nz-option *ngFor="let role of positionOptions" [nzValue]="role.id.toString()"
                        [nzLabel]="role.name">
                    </nz-option>
                </nz-select>
            </nz-form-control>
        </nz-form-item>

        <nz-form-item>
            <nz-form-control [nzSpan]="14" [nzOffset]="6">
                <button nz-button nzType="primary" class="mr-10">提交</button>
                <button nz-button type="reset" (click)="cancel()">取消</button>
            </nz-form-control>
        </nz-form-item>
    </form>
</ng-template>